<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
    <link rel='stylesheet' href='/stylesheets/bootstrap.css' />
  </head>
  <body>
    <%- include header %>
    <header class="main-header" style="background-image: url(images/1492673792372face02.jpg)">
        <div class="container">
            <div class="row">
                <div class="col-sm-12"> 
                    <h3>万千歌手 近在眼前</h3>
                    <div class="col-lg-6">
                      <form class="input-group middle" action="./music/musicdetail" method="get">
                        <input type="text" class="form-control" name="title" placeholder="Search for...">
                        <span class="input-group-btn">
                          <button class="btn btn-default" type="submit">搜索</button>
                        </span>
                      </form><!-- /input-group -->
                    </div>
                </div>
            </div>
        </div>
    </header>
    <div class="row" id="box">
      <% list.forEach(function(item,idx){ %>
        <div class="col-sm-4 col-md-3 col-xs-6">
          <div class="thumbnail">
            <img class="lazy" width="200" height="200" src="/images/upload/load.jpg" data-original="<%- item.pic_big %>"">
            <div class="caption top">
              <a href="./music/musicdetail?song_id=<%= item.song_id %>"><%- item.title %></a>
            </div>
          </div>
        </div>
     <%})%>
    </div>
    <nav aria-label="..." class="container text-center">
      <ul class="pagination">
        <li class="">
          <a href="./music?pageNo=<%= pageNo > 1 ? parseInt(pageNo)-1: 1 %>">
              上一页
          </a>
        </li>
        <% for(var i=1;i<=totalPages;i++){ %>
             <li class="<%- i==pageNo? 'active':'' %>">
                <a href="./music?pageNo=<%= i %>" ><%- i %></a href="">
              </li>
        <%}%>
        <li class="">
          <span>
            <a aria-hidden="true" href="./music?pageNo=<%= pageNo < totalPages ? parseInt(pageNo)+1: totalPages %>">下一页</a>
          </span>
        </li>
      </ul>
    </nav>
    <%- include footer %>
    <script src="/javascripts/jquery-1.11.3.js"></script>
    <script src="/javascripts/jquery.lazyload.js"></script>
    <script src="/javascripts/bootstrap.js"></script>
    <script type="text/javascript" charset="utf-8">
      $(function() {
          $("img.lazy").lazyload({effect: "fadeIn",container:$('#box')});
          // $('.btn').on('click',function(){
          //   //alert($('.form-control').val())
          //     window.location.href='./music/musicdetail?title='+$('.form-control').val()
          // })
      }); 
    </script>
  </body>
</html>